<template>
	<div class="add-box">
		<div>
			<mt-field label="收货人" placeholder="请输入收货人姓名" v-model="formData.trueName"></mt-field>
			<mt-field label="联系电话" placeholder="请输入手机号" type="tel" v-model="formData.mobile"></mt-field>
			<mt-field label="所在地区" class="area">
				<span @click="example4" class="area-chose">{{areaText}}</span>
			</mt-field>
			<mt-field label="" placeholder="请填写详细地址" type="textarea" rows="2" v-model="formData.areaInfo"></mt-field>

			<!--<p style="padding: 30px 0">选择的结果：<span style="color: red;">{{selectStr}}</span></p>-->
		</div>
		<vue-pickers v-if="show4" :show="show4" :selectData="pickData3" v-on:cancel="close" v-on:confirm="confirmFn"></vue-pickers>
		<div class="save">
			<button type="button" @click="saveAddress">保存</button>
		</div>
	</div>
</template>

<script>
	import { Field } from 'mint-ui';
	import { Picker } from 'mint-ui';
	import VuePickers from 'vue-pickers';
	import { provs_data, citys_data, dists_data } from 'vue-pickers/lib/areaData'
	import { Toast } from 'mint-ui';
	export default {
		components: {
			VuePickers
		},
		data() {
			return {
				selectStr: '',
				show4: false,
				areaText: '选择区域',
				pickData3: {},
				formData: {
					trueName: '',
					mobile: ''
				}
			}
		},
		methods: {
			getAreaInfo() {
				this.$http.post('/mobliecart/cart_address.htm', {
					pid: 0
				}).then(res => {
					if(res.code == 0) {
						this.pickData3 = {
							columns: 3,
							link: true,
							pData1: res.data.provs_data,
							pData2: res.data.citys_data,
							pData3: res.data.dists_data,
						}
					}
				})
			},
			close() {
				this.show4 = false
			},
			confirmFn(data) {
				this.selectStr = data.select1.text
				if(data.select2) {
					this.selectStr += '-' + data.select2.text
				}
				if(data.select3) {
					this.selectStr += '-' + data.select3.text
				}
				this.areaText = this.selectStr;
				this.formData.area_info = data.select1.text + data.select2.text + data.select3.text;
				this.formData.area_id = data.select3.value;
				this.close();
			},
			example4() {
				this.show4 = true
			},
			saveAddress() {
				this.$http.post('/mobliecart/cart_address_save.htm', {
					trueName: this.formData.trueName,
					mobile: this.formData.mobile,
					area_info: this.formData.area_info + this.formData.areaInfo,
					area_id: this.formData.area_id,
					id: this.$route.query.id
				}).then(res => {
					if(res.code == 0) {
						Toast('保存成功')
						this.$router.push('/address');
					}
				})
			}
		},
		created() {
			this.getAreaInfo();
			if(this.$route.query.id) {
				this.api.setHeader('编辑收货地址');
				this.$http.post('/mobliecart/address_edit.htm', {
					id: this.$route.query.id
				}).then(res => {
					if(res.code == 0) {
						this.formData.trueName = res.data.address.trueName;
						this.formData.mobile = res.data.address.mobile;
						this.formData.area_info = res.data.provs_data.text + '-' + res.data.citys_data[res.data.provs_data.value].text + '-' + res.data.dists_data[res.data.citys_data[res.data.provs_data.value].value].text
						this.areaText = res.data.provs_data.text + '-' + res.data.citys_data[res.data.provs_data.value].text + '-' + res.data.dists_data[res.data.citys_data[res.data.provs_data.value].value].text
						this.formData.areaInfo = res.data.address.area_info.split(res.data.dists_data[res.data.citys_data[res.data.provs_data.value].value].text)[1]
					}
				})
			} else {
				this.api.setHeader('新增收货地址');
			}
		}
	}
</script>

<style lang="less">
	.add-box {
		.area {
			position: relative;
			.area-chose {
				z-index: 666;
				position: absolute;
				top: -.2rem;
				right: 1px;
				display: block;
				width: 220px;
				padding: 3px .5rem;
				text-align: left;
				color: #666;
				letter-spacing: 1px;
			}
		}
		textarea {
			overflow: hidden;
			resize: none;
		}
		.save {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 1rem;
			button {
				background: none;
				border: none;
				border-radius: .1rem;
				font-size: 14px;
				letter-spacing: 2px;
				color: #fff;
				background-color: #006CB5;
				padding: .14rem .5rem;
				margin-top: .24rem;
				width: 80%;
				margin-bottom: .5rem;
			}
		}
	}
</style>